<template>
    <el-dialog v-model="visible" title="查看人员">
        <el-form :model="formData">

            <el-form-item label="人员名称" :label-width="120">
                <el-input v-model="formData.username" />
            </el-form-item>
            <el-form-item label="人员角色" :label-width="120">
                <el-input v-model="formData.player" />
            </el-form-item>
            <el-form-item label="农场职务" :label-width="120">
                <el-input v-model="formData.player" />
            </el-form-item>
            <el-form-item label="登录帐号" :label-width="120">
                <el-input v-model="formData.phonenumber" />
            </el-form-item>

            <el-form-item label="上级人员" :label-width="120">
                <el-input v-model="formData.manager" />
            </el-form-item>
            <el-form-item label="备注" :label-width="120">
                <el-input aria-placeholder="请输入备注" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang='ts' setup>
import type { IUserTableItem } from '@/interfaces/IUser';
import { reactive,watch } from 'vue';
const props=defineProps(["data"])
const visible = defineModel({ required: true })
const originFormData: IUserTableItem = {
    id: null,
    username: "",
    phonenumber: "",
    player: "",
    manager: "",
    land: [''],
    time: "",
}
const formData = reactive({
    ...originFormData

})
watch(()=>props.data,(value:IUserTableItem|null)=>{
    //   console.log(value)
    if(value){
        Object.assign(formData,value);
    }else{
        Object.assign(formData,originFormData);
    }
});



</script>

<style lang='scss' scoped></style>